<template>
  <a-spin :spinning="confirmLoading">
    <a-form-model ref="form" :model="models" :rules="validatorRules">
      <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="platform" required label="发布平台">
        <a-radio-group name="tenantStatus" v-model="models.platform">
          <a-radio value="抖音">抖音</a-radio>
          <a-radio value="淘宝">淘宝</a-radio>
          <a-radio value="京东">京东</a-radio>
          <a-radio value="天猫幽默">天猫</a-radio>
          <a-radio value="唯品会">唯品会</a-radio>
          <a-radio value="拼多多">拼多多</a-radio>
          <a-radio value="其它">其它</a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="brandName" required label="品牌名称">
        <a-input placeholder="请输入品牌名称" v-model="models.brandName" />
      </a-form-model-item>
      <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="productName" required label="商品名称">
        <a-input placeholder="请输入商品名称" v-model="models.productName" />
      </a-form-model-item>
      <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="productType" required label="商品品类">
        <a-input placeholder="请输入商品品类" v-model="models.productType" />
      </a-form-model-item>
      <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="productPosition" required label="商品定位">
        <div class="editIconMore clearInput">
          <j-search-select-tag
            placeholder="请做出你的选择"
            v-model="models.productPosition"
            :dictOptions="searchOptions"
            mode="multiple"
            v-if="models.productPosition !== '' && models.productPosition !== undefined"
          >
          </j-search-select-tag>
          <div class="addIcon" @click="addShop" v-if="addIconShow">+添加</div>
          <input type="text" class="shuInput" placeholder="请输入" v-model="shoppIngIcon" @change="search" v-else />
        </div>
      </a-form-model-item>
      <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="productFeature" required label="商品卖点">
        <!-- <InputTag v-model="models.productFeature" placeholder="文章关系词" :dic="models.productFeature" /> -->
        <div class="editIconMore clearInput">
          <j-search-select-tag
            placeholder="请做出你的选择"
            v-model="models.productFeature"
            mode="multiple"
            v-if="models.productFeature !== '' && models.productFeature !== undefined"
          >
          </j-search-select-tag>
          <div class="addIcon" @click="addShop1" v-if="addIconShow1">+添加</div>
          <input type="text" class="shuInput" placeholder="请输入" v-model="shoppIngIcon1" @change="search1" v-else />
        </div>
      </a-form-model-item>
    </a-form-model>
  </a-spin>
</template>

<script>
import InputTag from '../../component/TagLebal' //付费跳转弹框
export default {
  name: 'CommerceProducts',
  components: {
    InputTag,
  },
  props: {
    model: {
      type: Object,
      default: {},
    },
  },

  data() {
    return {
      addIconShow: true,
      addIconShow1: true,
      searchOptions: [
        {
          text: '中高端',
          value: '中高端',
        },
        {
          text: '自动超频',
          value: '自动超频',
        },
      ],
      shoppIngIcon: '',
      shoppIngIcon1: '',
      models: this.model,
      confirmLoading: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
      },
      validatorRules: {
        platform: [{ required: true, message: '请选择发布平台' }],
        brandName: [{ required: true, message: '请输入品牌名称' }],
        productName: [{ required: true, message: '请输入商品名称' }],
        productType: [{ required: true, message: '请输入商品品类' }],
        productPosition: [{ required: true, message: '请添加商品定位' }],
        productFeature: [{ required: true, message: '请添加商品卖点' }],
      },
    }
  },

  created() {},
  computed: {
    models1() {
      return this.models
    },
  },
  watch: {
    models1: {
      handler(newVal, oldVal) {
        // console.log('newVal + oldVal',newVal, oldVal)
        // console.log('handler',newVal,  this.model)
        if (!newVal.platform) {
          //只需判断一个即可
          this.$set(this.model, "platform", "抖音");
        }
      },
      deep: true,
      immediate: true,
    },
  },
  updated() {},
  mounted() {
    this.$nextTick(function () {
      console.log('11111111111111111', this.models)
    })
  },
  methods: {
    // 添加标签
    addShop() {
      this.addIconShow = false
    },
    addShop1() {
      this.addIconShow1 = false
    },
    search(event) {
      let str = event.target.value
      this.shoppIngIcon = ''
      console.log('this.models.productPosition', this.models.productPosition)
      if (this.models.productPosition === undefined || this.models.productPosition === '') {
        this.models.productPosition = ''
        this.models.productPosition = str
      } else {
        this.models.productPosition += ',' + str
      }

      this.addIconShow = true
    },
    search1(event) {
      let str = event.target.value
      this.shoppIngIcon1 = ''
      console.log('this.models.productFeature', this.models.productFeature)
      if (this.models.productFeature === undefined || this.models.productFeature === '') {
        this.models.productFeature = ''
        this.models.productFeature = str
      } else {
        this.models.productFeature += ',' + str
      }
      this.addIconShow1 = true
    },
    generatedBtnProp() {
      let obj = {
        platform: this.models.platform,
        brandName: this.models.brandName,
        productName: this.models.productName,
        productType: this.models.productType,
        productPosition: this.models.productPosition,
        productFeature: this.models.productFeature,
      }
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$emit('appApiAsk', 1, obj)
        } else {
          this.$emit('appApiAsk', 2, obj)
        }
      })
    },
  },
}
</script>

<style lang="less">
</style>